import React from 'react';
import {List, Icon} from "weaver-mobile";

export default class Ellipsis extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            show: true,
            showIcon: false
        }
    }

    componentDidMount() {
        setTimeout(()=>{
            let ellipsis = document.getElementsByClassName("accessView-content")[0];
            if (ellipsis&&ellipsis.scrollHeight < 66 && ellipsis.scrollHeight >= 0) {
                this.setState({
                    showIcon: false
                })
            } else {
                this.setState({
                    showIcon: true
                })
            }
        },500)

    }

    render() {
        const {label, value} = this.props;
        return <List.FormItem
            label={label + ":"}
            noBorder
            line
            className="text-span"
            extra={this.state.showIcon ? (this.state.show ? [<Icon key="right" type="right"
                                                                   onClick={() => this.setState({show: false})}/>] : [
                <Icon key="up" type="up"
                      onClick={() => this.setState({show: true})}/>]) : []}
            content={<span ref="thisDiv"
                className={this.state.show ? "accessView-content accessView-content-ellipsis" : "accessView-content"}
                dangerouslySetInnerHTML={{__html: value}}/>}
        />
    }
}
